/**
 * 左侧菜单，右侧 content 的布局，
 * 菜单时根据 route.config 的配置自动生成
 */
import {Layout,} from 'antd';

import {Dispatch} from 'redux';
import React, {useState} from 'react';
import {connect} from 'react-redux';
import style from './left-menu-content.module.css'
import {UserProps} from "../../Config/auth.config";
import {RouteItem} from "../../Pages/type";
import MenuBase, {getContent} from "../base/layout.component";

export interface BasicLayoutProps  {
  // 显示要菜单 分支页面组件
  routes:RouteItem[];
  // redux 事件派发器
  dispatch: Dispatch;
  // 默认显示项
  defaultKey:string;
  // 授权码
  authItem?:string[];
  mode?:'horizontal'| 'vertical';
}

const BasicLayout: React.FC<BasicLayoutProps>= props => {
  const { routes ,defaultKey,authItem=[] ,mode = 'vertical'} = props;
  // 菜单分支的key，用来控制 从菜单的 跳转
  const [key, setKey] = useState<string>(defaultKey);

  const item = getContent(key,routes);
  return  (
    <Layout className={style.content}>
       <Layout.Sider trigger={null} className={style.fullHeight}  >
            <MenuBase routes={routes} defaultKey={defaultKey} setKey={setKey} mode={mode} authInfo={authItem}/>
        </Layout.Sider>
        <Layout.Content >
          {item.component}
      </Layout.Content>
  </Layout>
);
};

export default connect(({ user}:{user:UserProps }) => ({user}))(BasicLayout);
